<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="50px"
    style="margin-top: 10px"
  >
    <el-form-item label="参数" prop="parameter">
      <el-input v-model="form.parameter"></el-input>
    </el-form-item>
    <el-form-item label="数值" prop="value">
      <el-input v-model="form.value"></el-input>
    </el-form-item>
    <el-form-item align="center">
      <el-row style="width:100%;">
        <el-col :span="20"><div class="grid-content ep-bg-purple" /></el-col>
        <el-col :span="4">
          <el-button type="primary" @click="saveEdit(formRef)">添加</el-button></el-col>
      </el-row>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance, FormRules, UploadProps } from "element-plus";
import { ref } from "vue";
import base from "../utils/base";

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  edit: {
    type: Boolean,
    required: false,
  },
  update: {
    type: Function,
    required: true,
  },
});

const defaultData = {
	parameter: "",
	value: "",
};

const form = ref( defaultData);

const formRef = ref<FormInstance>();
const saveEdit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  commit();
};
const commit = () => {
	console.log(form.value)
  props.update(form.value);
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.video {
  margin-top: 10px;
  width: 100%;
}
</style>
